<template>
  <div class="form">
    <h2>{{title}}</h2>
      <el-form ref="form" :model="redact" label-width="80px">
  <el-form-item label="楼盘名称">
    <el-input v-model="redact.title" style="width:350px"></el-input>
  </el-form-item>

  <el-form-item label="所属区域">
     <el-input v-model="redact.address" style="width:350px"></el-input>
  </el-form-item>
 <el-form-item label="价格">
    <el-input type="text" v-model="redact.price" style="width:350px"></el-input>
  </el-form-item>
  <el-form-item label="状态">
    <el-select v-model="redact.state" placeholder="请选择活动区域" style="width:350px">
      <el-option label="开盘" :value="true"></el-option>
      <el-option label="未开盘" :value="false"></el-option>
    </el-select>
  </el-form-item>

 
  <el-form-item>
    <el-button type="primary" @click="onSubmit(redact)">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
// import <组件名称> from '<组件路径>'
import {mapState,mapActions} from 'vuex'
  export default {
    name: 'Form',
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        //    form: {
        //   title: '',
        //   address: '',
        //   price: '',
        //   state: '',
        // }
      }
    },
    props:{
        form:{
            type:Object
        },
        title:{
          type:String
        }
    },
    //监听属性 类似于data概念
    computed: {
        ...mapState(['redact'])
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      ...mapActions(['SET_HOSING_LIST']),
         onSubmit(redact) {
          
       this.$emit('onSubmit',redact)
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.SET_HOSING_LIST()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
  .form{
      width: 50%;
      height: 50%;
      position: fixed;
      background: rgba(0,0,0, .4);
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    
  }
  .el-form-item__label{
      padding-left: 50px;
  }
</style>